<template>
  <div class="message">
    <van-nav-bar
      title="消息"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    />
    <div class="message-body" v-if="messageList.length === 0">
      <van-pull-refresh
        style="height: 100%"
        v-model="refreshLoading"
        success-text="刷新成功！"
        @refresh="onRefresh"
      >
        <van-empty image-size="12rem" description="暂无消息" />
      </van-pull-refresh>
    </div>
    <div class="message-body" v-else>
      <van-pull-refresh
        class="refresh"
        v-model="refreshLoading"
        success-text="刷新成功！"
        @refresh="onRefresh"
      >
        <div
          class="item"
          v-waves
          v-for="item in messageList"
          :key="item.id"
          @click="goMeetingDetail(item)"
        >
          <van-swipe-cell>
            <div class="swiper-item">
              <div class="header">
                <span class="iconfont icon-tongzhifill" v-if="!item.isRead"></span>
              </div>
              <div class="content">
                <span class="title">{{ item.content }}</span>
                <span class="time">{{ item.updateTime }}</span>
              </div>
            </div>
            <template #right>
              <van-button
                class="delete-btn"
                square
                type="danger"
                text="删除"
                @click="swiperClick(item)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, computed, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
  getMessagePageData,
  updateIsRead,
  deleteMessageById,
} from "@/api/message/message.js";
import { getCmsMeetingById } from "@/api/home/meetingDetail.js";
import { clearTimer } from "@/utils/util.js";
import { Notify } from "vant";
export default {
  name: "message",
  setup() {
    const router = useRouter();
    const store = useStore();

    const userNumber = computed(() => store.getters.getUserNumber);
    const wavesTime = computed(() => store.getters.getWavesTime);

    let timer = null;

    onMounted(() => {
      getMessageList();
    });

    let refreshLoading = ref(false);

    // 刷新
    function onRefresh() {
      getMessageList();
    }

    let messageList = ref([]);

    async function getMessageList() {
      const res = await getMessagePageData({
        userNumber: userNumber.value,
      });

      refreshLoading.value = false;

      if (res.data.code === 400) {
        Notify({ type: "danger", duration: 1000, message: res.data.message });
        return;
      }

      // 按时间 倒叙 排序
      res.data.data?.records.sort(
        (a, b) => new Date(b.updateTime) - new Date(a.updateTime)
      );
      console.log(res);
      // 格式化数据
      const data = res.data.data.records.map((t) => {
        let meetingId = t.content.split("&")[0];
        t.meetingId = meetingId;
        t.content = t.content.split("&")[1];
        return t;
      });
      messageList.value = data;
    }

    // 跳转到会议详情
    async function goMeetingDetail(item) {
      console.log(item);
      const ress = await getCmsMeetingById({ id: item.meetingId });
      console.log(ress);
      const meetingData = ress.data.data;

      const res = await updateIsRead([
        {
          id: item.id,
          isRead: true,
        },
      ]);
      if (res.data.code === 400) {
        Notify({ type: "danger", duration: 1000, message: res.data.message });
        return;
      }
      timer = setTimeout(() => {
        if (
          meetingData.meetingStatus === 6 &&
          userNumber.value === meetingData.userNumber
        ) {
          router.push({
            path: "/meetingrecorddetail",
            query: {
              id: item.meetingId,
            },
          });
        } else if (meetingData.meetingStatus !== 6) {
          router.push({
            path: "/meeting",
            query: {
              id: item.meetingId,
              type: 0,
            },
          });
        } else {
          return;
        }
      }, wavesTime.value);
    }

    async function swiperClick(item) {
      console.log(item);
      const res = await deleteMessageById([item.id]);
      if (res.data.code === 400) {
        Notify({ type: "danger", duration: 1000, message: res.data.message });
        return;
      }
      getMessageList();
    }

    const onClickLeft = () => history.back();

    onUnmounted(() => {
      clearTimer(timer);
    });

    return {
      messageList,
      refreshLoading,
      onClickLeft,
      goMeetingDetail,
      swiperClick,
      onRefresh,
    };
  },
};
</script>

<style lang="scss" scoped>
.message {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);

  .message-body {
    width: 100%;
    height: calc(100vh - var(--van-nav-bar-height));

    .refresh {
      width: 100%;
      height: 100%;
      overflow: auto;

      .item {
        .delete-btn {
          height: 100%;
        }
        .swiper-item {
          width: 100vw;
          height: 8rem;
          background-color: #fff;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 1rem 0 0.5rem;

          // &:active {
          //   background-color: var(--active-background-color);
          //   transition: var(--active-transition);
          // }

          .header {
            width: 2rem;
            height: 100%;
            box-sizing: border-box;
            padding: 1.5rem 0;

            .iconfont {
              color: var(--success-btn-bg);
            }
          }
          .content {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            padding: 1rem 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            border-bottom: 1px solid #eee;
            // background-color: antiquewhite;
            .title {
              font-size: 1.5rem;
              font-weight: bold;
              overflow: hidden;
              word-wrap: break-word;
            }
            .time {
              color: var(--global-second-text-color);
            }
          }
        }
      }
    }
  }
}
</style>
